<template>
  <div>
    <Consumer></Consumer>
    <button @click="addItem">添加元素</button>

    <Pub></Pub>
    <Sub></Sub>
  </div>
</template>

<script>
import Consumer from './Consumer.vue'
import { computed } from 'vue'
import Sub from './Sub.vue'
import Pub from './Pub.vue'
export default {
  components: { Consumer, Sub, Pub },
  data() {
    return {
      list: ['item']
    }
  },
  provide() {
    return {
      name: 'slim',
      age: '18',
      // size: this.list.length
      size: computed(() => this.list.length) // ref对象 .value
    }
  },
  methods: {
    addItem() {
      this.list.push('item')
    }
  }
}
</script>

<style scoped></style>
